<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{message}}</h3>
			<!-- <h3>{{reversedMessage()}}</h3> -->
			<!-- <h3>{{reversedMessage()}}</h3> -->
			<h3>{{reversedMessage}}</h3>
			<h3>{{reversedMessage}}</h3>
			<hr />
			<h3>{{firstName}}</h3>
			<h3>{{lastName}}</h3>
			<h1>{{fullName}}</h1>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					message: 'Hello',
					// reversedMessage: 'abc'
					firstName: '张',
					lastName: '三',
					// fullName: '张三'
				},
				methods: {
					// reversedMessage() {
					// 	console.log("methods");
					// 	return this.message.split("").reverse().join("");
					// }
				},
				computed: {
					reversedMessage() {
						console.log("computed");
						return this.message.split("").reverse().join("");
					},
					fullName() {
						return this.firstName + this.lastName;
					}
				}
			})
			// let message = 'Hello';
			// let arr = message.split("");
			// console.log(arr);
			// console.log(arr.reverse());
			// console.log(arr.reverse().join(""));
		</script>
	</body>
</html>
